<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2024-02-07 10:54:27
 * @LastEditors: 陈波
 * @LastEditTime: 2024-03-07 19:55:44
 * @Description: 
 * @FilePath: \graDesign\src\views\UserInfo\index.vue
-->
<template>
  <div>
    <LayoutDetail>
      <el-row :gutter="20" justify="space-between">
        <el-col :span="8">
          <div class="common left_img">
            <div class="avatar_container" style="position: relative;">
              <div class="imgBox" @click="showImg('avatar')">
                <el-avatar shape="circle" :size="size" :src="userInfo.avatar" />
                <WaterMark :content="['用户头像']" fontStyle="black" :rotate="0" />
              </div>
              <p style="margin-top: 10px;">用户头像</p>
            </div>
            <div class="faceBase_container">
              <div class="imgBox" @click="showImg('face')">
                <el-avatar shape="square" :size="size" :src="userInfo.faceBase" />
                <WaterMark :content="['人像信息']" fontStyle="white" :rotate="0" />
              </div>
              <p style="margin-top: 10px;">用户人脸信息</p>
            </div>
          </div>
        </el-col>
      
        <el-col :span="16">
          <div class="common middle_info">
            <div class="btn">
              <el-button type="success" size="large" @click="editDialogVisible = true" style="z-index: 999;">修改个人信息</el-button>
            </div>
            <div class="infoDes">
              <BasicDescriptions :dataList="descriptionList" size="large" />
            </div>
          </div>
        </el-col>
        <!-- <el-col :span="8">
          <div class="common right_pwd">
            3
          </div>
        </el-col> -->
      </el-row>
    </LayoutDetail>
    <!-- 查看头像/人脸 -->
    <BasicDialog
      :visible="imgDialogVisible"
      width="30%"
      :showClose="true"
      @handleClose="close"
    >
      <img style="width: 100%; height: 100%;" :src="imgShow" alt="暂无图片...">
    </BasicDialog>
    <!-- 修改用户信息 -->
    <BasicDialog
      :visible="editDialogVisible"
      title="编辑信息"
      width="40%"
      :showClose="true"
      @handleClose="close"
    >
      <!-- tabBar -->
      <!-- <div class="tabs">
        <span 
          class="com" 
          :class="{ 'active': tabType == 'basicInfo' }"
          @click="editChange('basicInfo')"
        >基本信息</span>
        <span 
          class="com" 
          :class="{ 'active':  tabType == 'password' }" 
          style="margin: 0 10px;"
          @click="editChange('password')"
        >修改密码</span>
        <span 
          class="com" 
          :class="{ 'active':  tabType == 'facebase' }"
          @click="editChange('facebase')"
        >人像数据</span>
      </div> -->

      <el-tabs v-model="activeName" class="tabs" @tab-click="handleTabChange">
        <!-- <el-tab-pane label="基本信息" name="basicInfo">
          <BasicInfoPane />
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="password">
          <PasswordPane />
        </el-tab-pane>
        <el-tab-pane label="人像数据" name="facebase">
          <FaceBasePane />
        </el-tab-pane> -->

        <el-tab-pane
          v-for="(item ,i) in tabsPaneList"
          :key="i"
          :label="item.label" 
          :name="item.value"
        >
          <!-- 加了动画的 -->
          <transition name="fade" mode="out-in">
            <component 
              :is="item.component" 
              :userInfo="userInfo" 
              @closeDialog="closeCallback"
            />
          </transition>
          <!-- 普通样式切换 -->
          <!-- <component :is="item.component" /> -->
        </el-tab-pane>

      </el-tabs>
    </BasicDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, shallowRef  } from 'vue';
import useLoginStore from '@/store/login';
import { storeToRefs } from 'pinia';
import type { TabsPaneContext } from 'element-plus'
import {
  Iphone,
  User,
  UserFilled,
  QuestionFilled,
  Timer
} from '@element-plus/icons-vue'
import BasicInfoPane from './components/BasicInfoPane.vue';
import FaceBasePane from './components/FaceBasePane.vue';
import PasswordPane from './components/PasswordPane.vue';
import AvatarPane from './components/AvatarPane.vue';

const loginStore = useLoginStore();
const { userInfo } = storeToRefs(loginStore);

// 用户头像和人脸大小size
const size = 150;
let imgShow = ref<string>('')
let imgDialogVisible = ref<boolean>(false);

const showImg = (type: string) => {
  if(type == 'avatar') {
    imgShow.value = userInfo.value.avatar;
  }
  if(type == 'face') {
    imgShow.value = userInfo.value.faceBase;
  }
  imgDialogVisible.value = true;
};

const close = () => {
  imgDialogVisible.value = false;
  editDialogVisible.value = false;
};

let descriptionList = ref([])
onMounted(() => {
  descriptionList.value = [
    {
      label: '用户名',
      value: userInfo.value.username,
      icon: shallowRef(User),
      span: 2,
      width: 280,
      align: 'center'
    },
    {
      label: '手机号',
      value: userInfo.value.phone,
      icon: shallowRef(Iphone),
      span: 2,
      align: 'center'
    },
    {
      label: '是否管理员',
      value: userInfo.value.ismanager ? '是' : '否',
      icon: shallowRef(UserFilled),
      span: 2,
      align: 'center'
    },
    {
      label: 'Q1:' + userInfo.value.securityQ1,
      value: userInfo.value.securityA1,
      icon: shallowRef(QuestionFilled),
      span: 2,
      align: 'center'
    },
    {
      label: 'Q2:' + userInfo.value.securityQ2,
      value: userInfo.value.securityA2,
      icon: shallowRef(QuestionFilled),
      span: 2,
      align: 'center'
    },
    {
      label: 'Q3:' + userInfo.value.securityQ3,
      value: userInfo.value.securityA3,
      icon: shallowRef(QuestionFilled),
      span: 2,
      align: 'center'
    },
    {
      label: '账号创建时间',
      value: userInfo.value.createTime,
      icon: shallowRef(Timer),
      span: 2,
      align: 'center'
    },
    {
      label: '上次更新时间',
      value: userInfo.value.updateTime,
      icon: shallowRef(Timer),
      span: 2,
      align: 'center'
    }
  ]
});

let editDialogVisible = ref<boolean>(false);
type TabT = 'basicInfo' | 'password' | 'facebase' | 'avatar';
const activeName = ref<TabT>('basicInfo')

const tabsPaneList = [
  {
    label: '基本信息',
    value: 'basicInfo',
    component: BasicInfoPane
  },
  {
    label: '修改密码',
    value: 'password',
    component: PasswordPane
  },
  {
    label: '人像数据',
    value: 'facebase',
    component: FaceBasePane
  },
  {
    label: '头像图片',
    value: 'avatar',
    component: AvatarPane
  }
]

const handleTabChange = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab.paneName)
}

const closeCallback = () => {
  editDialogVisible.value = false;
}

</script>

<style scoped lang="scss">
.flex_coloumn_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.common {
  // border-right: 1px solid red;
  min-height: calc(100vh - 240px);
}
.left_img {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(225, 229, 237);
  .avatar_container {
    flex: 1;
    @extend .flex_coloumn_center;
    font-size: 18px;
    border: 1px solid rgb(225, 229, 237);
  }
  .faceBase_container {
    flex: 1;
    @extend .flex_coloumn_center;
    border: 1px solid rgb(225, 229, 237);
  }
}

.imgBox {
  position: relative;
  &:hover {
    cursor: pointer;
    .el-avatar {
      box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    }
  }
}

.middle_info {
  position: relative;
  padding: 10px;
  // border: 1px solid rgb(38, 57, 77);
  .btn {
    display: flex;
    justify-content: flex-end;
  }
  .infoDes {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    // border: 1px solid green;
  }
}


// .tabs {
//   border-bottom: 1px solid #666;
//   padding-bottom: 5px;
//   .com {
//     color: black;
//     font-size: 14px;
//     cursor: pointer;
//   }
//   .active {
//     color: green;
//     border-bottom: 2px solid green;
//     padding-bottom: 5px;
//   }
// }

/* 渐变设置 */
.fade-enter-from, .fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
.fade-enter-active {
  transition: all 0.7s ease;
}
.fade-leave-active {
   transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}
</style>